<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>CMSWING</title>
    <link rel="shortcut icon" href="/resource/img/favicon.ico">
    <!-- Bootstrap -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet">
    <link href="/resource/css/flat-ui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/resource/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/resource/wxeditor/css/jquery.jgrowl.css"/>
    <link rel="stylesheet" href="/resource/css/wwei_editor.css"/>
    <link rel="stylesheet" href="/resource/js/webuploader/webuploader.css"/>
    <link rel="stylesheet" href="/resource/css/home.css"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/resource/js/vendor/html5shiv.js"></script>
    <script src="/resource/js/vendor/respond.min.js"></script>
    <![endif]-->
    <!--<script src="/resource/js/cufon-yui.js" type="text/javascript"></script>-->
    <!--<script src="/resource/js/ChunkFive_400.font.js" type="text/javascript"></script>-->
    <!--<script type="text/javascript">-->
    <!--Cufon.replace('.intro>h1', {color: '#fff', textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)'});-->
    <!--Cufon.replace('.navbar-brand', {textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)'});-->

    <!--</script>-->
</head>
<body class="weixin">
<div id="weixin">
    <% include ../Home/include/nav.html%>
</div>
<div class="container top36 bot40">
    <div class="panel panel-default">
        <div class="panel-body row wxbox">
            <div class="col-lg-2 wx-left">
                <div class="list-group">
               <span class="list-group-item  list-group-item-title">
                   <i class="fa fa-wechat"></i> 文案
               </span>
                    <a href="#" class="list-group-item ">微信公众号</a>
                    <a href="#" class="list-group-item active">微信文案编辑器</a>

                </div>
                <div class="list-group">
               <span class="list-group-item  list-group-item-title">
                   <i class="fa fa-qrcode"></i> 二维码
               </span>
                    <a href="#" class="list-group-item">生成二维码记录</a>
                    <a href="#" class="list-group-item">解析二维码记录</a>

                </div>
            </div>
            <div class="col-lg-10 wx-right">
                <div class="wx-hd"><h2>微信文案编辑器</h2>
                    <ul class="nav nav-tabs">
                        <li role="presentation"><a href="/weixin/index/cover">封面编辑</a></li>
                        <li class="active" role="presentation"><a href="/weixin/index/content">正文编辑</a></li>

                    </ul>
                </div>
                <div class="highlight_box"><p class="desc">
                    为保障用户体验，微信公众平台严禁恶意营销以及诱导分享朋友圈，严禁发布色情低俗、暴力血腥、政治谣言等各类违反法律法规及相关政策规定的信息。一旦发现，我们将严厉打击和处理。 </p></div>
                <div class="wx-bd">
                    <form>
                        <div class="row">


                            <div class="col-lg-5">
                                <div id="wxpreview" style="margin-bottom: 213px">
                                    <div class="preicon">简单预览</div>
                                    <div id="wx_show_title"><h4>#图片消息#</h4><em>2015-05-23 13:58:37</em><span
                                            class="wxhao"></span></div>
                                    <!--wx_show_title-->
                                    <div class="wxpreimg"><img width="290" src="/resource/img/nocover.jpg"></div>
                                    <p class="wxstr">简介说明</p>

                                    <div class="wxfoot">
                                        阅读57545&nbsp;&nbsp;&nbsp;&nbsp;赞8686
                                    </div>
                                    <div class="wxad ">
                                        &mdash; 推广 &mdash;
                                        <div class="wxadbg"></div>
                                    </div>
                                </div>
                                <h4>正文模板样式定义</h4>
                                <div class="form-inline">
                                    <hr/>
                                    <label>色调：</label><input class="colorPicker form-control" style="width:70px;"
                                                             id="custom-color"
                                                             value="#866EBB"/>
                                    <label class="checkbox" for="replace-color-all">
                                        <input type="checkbox" id="replace-color-all" value="1"> 正文换色</label>
                                    <hr/>
                                </div>
                                <ul class="nav nav-tabs" id="templateTab">
                                    <li class="active"><a href="#temp-title" data-type="title">标题</a></li>
                                    <li><a href="#temp-text" data-type="text">正文</a></li>
                                    <li><a href="#temp-img" data-type="img">图片</a></li>
                                    <li><a href="#temp-follow" data-type="follow">吸粉</a></li>
                                    <li><a href="#temp-scene" data-type="scene">场景</a></li>
                                    <li><a href="#temp-tpl" data-type="tpl">模板</a></li>
                                </ul>

                                <div class="tab-content template-content">
                                    <div id="template-loading" class="hide"><img src="/resource/img/loading.gif">
                                        加载中...
                                    </div>
                                    <div class="tab-pane active" id="temp-title"></div>
                                    <div class="tab-pane" id="temp-text"></div>
                                    <div class="tab-pane" id="temp-img"></div>
                                    <div class="tab-pane" id="temp-follow"></div>
                                    <div class="tab-pane" id="temp-scene"></div>
                                    <div class="tab-pane" id="temp-tpl"></div>
                                </div>
                                <!--tab-content-->


                            </div>

                            <div class="col-lg-7" id="wxcontent">
                                <fieldset style="">
                                    <div class="form-group">
                                        <label>标题</label>
                                        <input type="text" maxlength="50" id="wx-template-name" name="template_name" value="" class="span7 form-control" placeholder="请输入标题">
                                    </div>

                                    <label>分类<em>（选填）</em></label>
                                    <select name="catid" data-toggle="select" class="form-control select select-default mrs mbm">
                                    <option value="0">默认分类</option>
                                    <option value="1">新闻</option>
                                    <option value="2">财经</option>
                                    <option value="3">科技</option>
                                    <option value="4">语录</option>
                                    <option value="5">搞笑</option>
                                    <option value="6">趣玩</option>
                                    <option value="7">时尚</option>
                                    <option value="8">美女</option>
                                    <option value="9">生活</option>
                                    <option value="10">健康</option>
                                    <option value="11">运动</option>
                                    <option value="12">影音</option>
                                    <option value="13">教育</option>
                                    <option value="14">品牌</option>
                                    <option value="15">购物</option>
                                    <option value="16">明星</option>
                                    <option value="17">名人</option>
                                </select>

                                    <div class="well clearfix">
                                        <div class="controls controls-row">
                                            <span class="col-md-6">
                                                <label>封面<em>（大图尺寸：900 *500）</em></label>
                                                <input type="text" id="wx-template-cover" value="" name="cover" class="col-md-3 form-control" placeholder="封面图地址"></span>
                                            <span class="col-md-6"><label>&nbsp;</label><div class="wu-example" id="uploader2">
                                            <input type="hidden" value="" name="wxqr_aid" id="attids2">
                                                <input type="hidden" value="" name="wxqrcode" id="attpath2">
                                            <div class="uploader-list hide" id="thelist2"></div>
                                            <div class="btns">
                                                <div id="picker2" class="webuploader-container " >
                                                    <div class="webuploader-pick btn btn-default ">上传封面图片</div>
                                                </div>
                                                <button type="button" class="btn btn-default hide" id="ctlBtn2">开始上传</button>
                                            </div>
                                            <div id="themessage2"></div>
                                        </div></span></div>
                                        <div class="controls controls-row">
                                            <span class="col-md-6">
                                            <label>发表时间</label>
                                            <input type="text" id="wx-template-dateline" value="2015-05-23 13:58:37" name="dateline" class="span3 form-control" placeholder="时间">
                                            </span>
                                            <span class="col-md-6">
                                                <label>作者<em>（选填）</em></label>
                                                <input  type="text" value="" name="author" class="span3 form-control">
                                            </span>
                                        </div>
                                        <div class="controls controls-row">
                                            <span class="col-md-6"><label>阅读数</label>
                                            <input type="text" value="57545" maxlength="5" name="views" class="form-control" style="width:80px">
                                            </span>
                                            <span class="col-md-6"><label>点赞数</label><input type="text" value="8686" maxlength="4" name="likes" class="form-control" style="width:80px"></span></div>
                                    </div>
                                    <!--well--><label>摘要</label>
                                    <textarea placeholder="请输入摘要" id="wx-template-intro" name="intro" class="span7 form-control" rows="3"></textarea><label
                                        class="checkbox"><input
                                        type="checkbox" disabled="disabled" checked="checked"><span class="help-inline">如未设置封面/摘要，自动从正文提取</span></label>
                                    <hr>
                                    <div>
				<span class="pull-right">
					<a href="javascript:void(0);" id="copy-editor-html" class="btn btn-xs btn-primary">复制正文</a>
					<a href="javascript:void(0);" id="clear-editor" class="btn btn-xs btn-danger ">清空</a>
				</span>
                                        <label>正文</label>
                                    </div>
                                    <div style="clear:both"></div>
                                    <div>
                                        <script id="wwei_editor" type="text/plain"
                                                style="width:530px;height:633px;"></script>
                                    </div>


                                    <!--label class="checkbox"><input type="checkbox" name="is_local_img"><span class="help-inline">转存远程图片（可保证稳定性，但保存时将消耗一些时间，耐心等待）</span></label-->
                                    <hr>
                                    <label>已认证公众号<em>（选填）</em></label>
                                    <select id="wx-template-wxid" name="wxid"  data-toggle="select" class="form-control select select-default mrs mbm">
                                    <option value="0">由wwei提供 (VIP专属)</option>
                                </select>
                                    <span class="help-inline">设置后分享时可以显示摘要</span>
                                    <div class="well clearfix">

                                        <label>定义公众号 “名字” 和 “推广文案链接”<em>（选填）</em></label><br><label>公众号</label><input
                                            type="text" value="" id="hao_name" name="hao_name" class="form-control"
                                            placeholder="公众号">
                                        <label> 推广文案链接</label>
                                        <input type="text" value="" id="hao_url" name="hao_url" class="form-control"
                                               placeholder="请输入链接 http:// 开头的链接">
                                    </div>
                                    <label>自定义 阅读原文 <em>（选填）</em></label>
                                    <br>
                                    <label>文字</label>
                                    <input type="text" value="阅读原文" name="rhref_text" class="form-control" placeholder="原文链接">
                                    <label>原文链接</label>
                                    <input type="text" value="" name="rhref" class="form-control"
                                           placeholder="请输入链接 http:// 开头的链接">

                                    <hr>
                                    <button class="btn btn-primary" type="submit">保存并预览</button>
                                    发现您还没登陆，点击<a target="_blank" href="/login.html">登陆</a>更方便管理二维码
                                </fieldset>

                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
<% include ../Home/include/copyright.html%>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/resource/js/jquery.min.js"></script>
<script src="/resource/wxeditor/css/jquery.jgrowl.min.js"></script>
<!--<script src="/resource/js/jquery.particleground.min.js"></script>-->
<script src="/resource/js/flat-ui.min.js"></script>

<!--<script src="/resource/js/bootstrap.min.js"></script>-->
<script src="/resource/js/application.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" charset="utf-8" src="/resource/js/ueditor/wwueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/resource/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="/resource/js/ueditor/third-party/zeroclipboard/ZeroClipboard.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<!--<script type="text/javascript" charset="utf-8" src="/resource/js/ueditor/lang/zh-cn/zh-cn.js"></script>-->
<script type="text/javascript" src="/resource/wxeditor/js/less.js"></script>
<script type="text/javascript" src="/resource/wxeditor/js/colorPicker.js"></script>
<script type="text/javascript" src="/resource/wxeditor/js/wwei_editor.js"></script>
<script type="text/javascript" src="/resource/js/webuploader/webuploader.min.js"></script>
<script>
    var less_parser = new less.Parser;
    ZeroClipboard.config({swfPath: "/resource/js/ueditor/third-party/zeroclipboard/ZeroClipboard.swf"});
    var wwei_editor = UE.getEditor('wwei_editor');
    //加载本地缓存
    /*
     wwei_editor.ready(function(){
     var editor_document = wwei_editor.selection.document;
     if( window.localStorage){
     if(typeof window.localStorage._wweiContent != "undefined"){
     //wwei_editor.setContent(window.localStorage._wweiContent);
     }
     setInterval(function(){
     window.localStorage._wweiContent = wwei_editor.getContent();
     },2000);
     }
     });*/

    $(function () {
        /*模板Tab */
        var dataType = 'title';

        function _loadtemp(dataType) {
            $("#template-loading").show();
            $.ajax({
                type: "POST",
                url: "/weixin/index/loadtemp",
                data: {"type": dataType},
                success: function (data) {
                    $("#template-loading").hide();
                    var tabPane = $("#temp-" + dataType);
                    tabPane.html(data);
                    var _tempLi = tabPane.find('.template-list li');
                    _tempLi.hover(function () {
                        $(this).css({"background-color": "#f5f5f5"});
                    }, function () {
                        $(this).css({"background-color": "#fff"});
                    });
                    _tempLi.click(function () {
                        if (dataType == 'tpl') {
                            var _tempHtml = $(this).find('.tpl-code').html();
                            wwei_editor.setContent("");
                            wwei_editor.execCommand('insertHtml', _tempHtml);
                        } else {
                            var _tempHtml = $(this).html();
                            insertHtml(_tempHtml + "<p><br/></p>");
                        }

                    });
                }
            });
        }

        _loadtemp(dataType);//加载
        //TAB切换
        $('#templateTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');

            dataType = $(this).attr("data-type");
            if (dataType) {
                var tabPane = $("#temp-" + dataType);
                if (tabPane.find('.template-list').length <= 0) {
                    _loadtemp(dataType);
                }
            }
        });


        //清空
        $('#clear-editor').click(function () {
            if (confirm('是否确认清空内容，清空后内容将无法恢复')) {
                wwei_editor.setContent("");
            }
        });
        //复制
        var client = new ZeroClipboard($('#copy-editor-html'));
        client.on('ready', function (event) {
            client.on('copy', function (event) {
                event.clipboardData.setData('text/html', getEditorHtml());
                event.clipboardData.setData('text/plain', getEditorHtml());
                showSuccessMessage("已成功复制到剪切板");
            });
        });

        //预览效果
        $("#wx-template-name").blur(function () {
            var val = $(this).val();
            if (val) {
                $("#wxpreview h4").html(val);
            }
        });
        $("#wx-template-dateline").blur(function () {
            var val = $(this).val();
            if (val) {
                $("#wxpreview em").html(val);
            }
        });
        $("#wx-template-cover").blur(function () {
            var val = $(this).val();
            if (val) {
                $("#wxpreview .wxpreimg").html('<img src="' + val + '" width="290" height="209">');
            }
        });

        $("#wx-template-intro").blur(function () {
            var val = $(this).val();
            if (val) {
                $("#wxpreview .wxstr").html(val);
            }
        });
        $("#wx-template-wxid").change(function () {
            var val = $(this).find("option:selected").val(), text = $(this).find("option:selected").text(), url = $(this).find("option:selected").attr("data-url");

            if (text) {
                if (val == 0) text = '';
                if (!url) url = 'javascript:void(0);';
                $("#wxpreview .wxhao").html('<a href="' + url + '" target="_blank">' + text + '</a>');
            }
        });

        //定制效果
        $("#is_show_title").click(function () {
            var cked = $(this).attr("checked");
            if (cked == undefined) {
                $("#wx_show_title").hide();

            } else {
                $("#wx_show_title").show();
            }
        });
        $("#is_show_statis").click(function () {
            var cked = $(this).attr("checked");
            if (cked == undefined) {
                $("#wxpreview .wxfoot").hide();

            } else {
                $("#wxpreview .wxfoot").show();
            }
        });

        //颜色选择
        $('.colorPicker').colorPicker({
            customBG: '#222',
            init: function (elm, colors) { // colors is a different instance (not connected to colorPicker)
                elm.style.backgroundColor = elm.value;
                elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
            }
        });

//        $('#weixin').particleground({
//            dotColor: '#53DBC7',
//            lineColor: '#29C7AF'
//        });
    });
    //上传
    //TODO JINWEIRONG
    // 添加全局站点信息
    var SITE_URL = "#",BASE_URL = '#',WX_UPLOAD_URL="/weixin/index/imgupload";
    // 微信图片上传
    jQuery(function() {
        var $ = jQuery,
                $list = $('#thelist2'),
                $btn = $('#ctlBtn2'),
                state = 'pending',
                uploader;
        uploader = WebUploader.create({
            auto: true,
            // 不压缩image
            resize: false,
            // swf文件路径
            swf: BASE_URL + '/js/Uploader.swf',
            // 文件接收服务端。
            server: WX_UPLOAD_URL,

            accept: {
                title: 'wwei upload',
                extensions: 'gif,jpg,jpeg,png'
                //,mimeTypes: 'image/*,text/*,application/*'
            },
            fileNumLimit: 1,
            fileSizeLimit: 2097152,//2 * 1024 * 1024,
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker2'
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            $list.append( '<div id="' + file.id + '" class="item item-' + file.id + '">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state"><a href="javascript:void(0)" class="remove-this-' + file.id + '">移除</a>等待上传...</p>' +
                    '</div>' );

            $list.on('click','.remove-this-' + file.id, function() {
                if(confirm("?_? 你确定从列表中移除吗"))
                {
                    uploader.removeFile( file );
                    $list.find('.item-' + file.id).remove();
                }
            })

        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo( $li ).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css( 'width', percentage * 100 + '%' );
        });


        uploader.on( 'uploadSuccess', function( file,resporse ) {
            if(resporse.error || resporse.id<=0)
            {
                $( '#'+file.id ).find('p.state').text(resporse.error.message);
            }else if(resporse.id > 0)
            {
                $("#attids2").val(resporse.id);
                $("#attpath2").val(resporse.file_path);
                var file_url = SITE_URL + resporse.file_path;
                $("#wx-template-cover").val(file_url);
                $(".wxpreimg").html('<img src="'+file_url+'" width="290" height="209"/>');
                $( '#'+file.id ).find('p.state').html('<a href="javascript:void(0)" class="file-this-' + file.id + '">移除</a> 上传成功');
                $list.on('click','.file-this-' + file.id, function() {
                    if(confirm("?_? 你确定从列表中移除吗"))
                    {
                        //queue
                        uploader.removeFile( file );
                        $list.find('.item-' + file.id).remove();
                        $("#text_wxurl").val('');
                    }
                });

                $list.hide();

            }else
            {
                $list.show();
                alert("T_T 上传失败，请重新上传");
            }
        });


        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传出错');
        });

        uploader.on( 'all', function( type ) {
            if ( type === 'startUpload' ) {
                state = 'uploading';
            } else if ( type === 'stopUpload' ) {
                state = 'paused';
            } else if ( type === 'uploadFinished' ) {
                state = 'done';
            }

            if ( state === 'uploading' ) {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        $btn.on( 'click', function() {
            if ( state === 'uploading' ) {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });


    });
</script>
</body>
</html>
